<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
    <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>嘉童游乐中心-房间管理</title>
<jsp:include page="/common/commonCss.jsp"/>
<jsp:include page="/common/commonJs.jsp"/>

<script type="text/javascript">
    var  roomId;
    var  time;
    var	sTime;
    var	eTime;
	$(document).ready(function(){
		
		var branId = '${branId}';
		if(branId =='ZB'){
		$("#fkBranId").prepend("<option value=''>"+"全部"+"</option>");
		$("#fkBranId1").prepend("<option value=''>"+"请选择"+"</option>");
		}
		var objSelect = document.getElementById("fkBranId");
		for(var i=0;i<objSelect.options.length;i++){
			if(objSelect.options[i].value==''){
				objSelect.options[i].selected = true;
			}
		}
		var objSelect1 = document.getElementById("fkBranId1");
		for(var i=0;i<objSelect1.options.length;i++){
			if(objSelect1.options[i].value==''){
				objSelect1.options[i].selected = true;
			}
		}
		initTab("RoomForm");
		});
			
		
	
	function initTab(formId){
		var fkBranId = document.getElementById("fkBranId").value;
		document.getElementById("fkBranIdHidden").value=fkBranId;
		var form = $("#" + formId);
		var pagebean = new PageBean(form);
		pagebean.setTableId("RoomTable");
		pagebean.setCallback(initTable);
		pagebean.setFootId("pagefoot");
		setPagebeanObj(pagebean);
		pagebean.doPage();
		
	}
	
	function initTable(data){
		if(data==null){
			return;
		}
		$.each(data,function(ind,obj){
			var i = ind+1;
			var roomName = obj.roomName;
			var pkRoomId = obj.pkRoomId;
			var timeSec = obj.timeSec;
			var branName = obj.branName;
			var htm ="<tr>";
			 htm +="<td>" + i +"</td>";
			 htm +="<td>" + obj.branName + "</td>";
			 htm +="<td class='lv'><a href='#' onclick=\"openx('"+pkRoomId+"','"+timeSec+"','"+roomName+"','"+obj.minCnt+"','"+obj.maxCnt+"','"+branName+"')\">" + roomName + "</a></td>";
			 htm +="<td>" + obj.minCnt + "</td>";
			 htm +="<td>" + obj.maxCnt + "</td>";
			 htm +="<td>" + "<input type='button' value='删除' class='btn_l' onclick=\"deleteRoom('"+obj.pkRoomId+"')\">" + "</td></tr>";
			 $("#RoomTable").find("tr:eq("+ind+")").after(htm);
		});
		
	}
	function openq(){
		clean();
		$('#q').window('open');
		
	}
	
	function openx(pkRoomId,timeSec,roomName,minCnt,maxCnt,branName){
		clean();
		roomId = pkRoomId;
		time = timeSec;
		document.getElementById("roomName1").value = roomName;
		document.getElementById("minCnt1").value = minCnt;
		document.getElementById("maxCnt1").value = maxCnt;
		document.getElementById("branName").value = branName;
		var time1 = time.split(',');
		var length = time1.length-1;
		for(var i =0;i<length;i++){
			var time2 = time1[i].split('-');
			var sTime = time2[0];
			sTime=sTime.substring(0, 2)+":"+sTime.substring(2, 4);
			var eTime = time2[1];
			eTime=eTime.substring(0, 2)+":"+eTime.substring(2, 4);
			var htm = "<tr>";
			htm +="<td>" + sTime + "</td>";
			htm +="<td>" + eTime + "</td>";
			htm +="<td>" + "<input type='button' value='删除' onclick=\"deleteRow(this)\" class='btn_l'>" + "</td>";
			$("#addTime1").append(htm);
		}
		$('#qx').window('open');
	}
	
	function selectRoom(formId){
    	$("#"+formId+ " input:hidden[name='pageNo']").val(1);
    	initTab(formId);
    }
	//删除房间
	function deleteRoom(pkRoomId){
		$.messager.confirm('警告', $common_confirm_delete, function(r) {
			if (r) {
			$.ajax({
				url:'${basepath}deleteRoom.shtml',
				data:{"pkRoomId":pkRoomId},
				dataType:"text",
				async:false,
				success:function(result){
					if(result=="success"){
						alertInfo($common_delete_success);
						initTab("RoomForm");
					}
				},
				error : function(XMLHttpRequest) {
					 ajaxError(XMLHttpRequest);
					}
			});
		}
		});
	}
	//添加房间
	function addRoom(){
		var timeSec = "";
		var trueFlag = true;
		var addTimeFlag =false;
		$("#addTime").find("tr:not(:first)").each(function (){
			addTimeFlag =true;
			var sTime = $(this).find("td:eq(0)").html();
			var eTime = $(this).find("td:eq(1)").html();
			if(sTime.indexOf("div")>0){
				$.messager.alert('提示', '请先确定添加的预定时间段！', 'warning');
				trueFlag = false;
				return ;
			}else{
				sTime = sTime.replace(/:/,"");
				eTime = eTime.replace(/:/,"");
				timeSec +=  sTime + "-" + eTime + ",";
			}
		});
		var fkBranId = $("#fkBranId1").val();
		if(fkBranId == '')
		{
			alertWarning("请选择门店");
			document.getElementById("fkBranId1").value = "";
			refreshSelect();
			trueFlag = false;
			return;
		}
		var roomName = document.getElementById("roomName").value;
		var roomNameVal = encodeURI(roomName);
		var minCnt = document.getElementById("minCnt").value;
		var maxCnt = document.getElementById("maxCnt").value;
		if(roomName==''){
			alertWarning("房间名不能为空");
			trueFlag = false;
			return;
		}
		if(minCnt==''){
			alertWarning("最少人数不能为空");
			trueFlag = false;
			return;
		}
		if(maxCnt==''){
			alertWarning("最大人数不能为空");
			trueFlag = false;
			return;
		}
		if(minCnt>=maxCnt){
			alertWarning("最少，最大人数 填写范围有错");
			trueFlag = false;
			return;
		}
		if (!addTimeFlag && (null ==timeSec || timeSec == "")) {
			$.messager.alert('提示', '请增加预定时间段！', 'warning');
			trueFlag = false;
			return;
		}
		if(trueFlag){
		$.ajax({
			url:'addRoom.shtml',
			data:{"roomName":roomNameVal,"fkBranId":fkBranId,"minCnt":minCnt,"maxCnt":maxCnt,"timeSec":timeSec},
			dataType:"text",
			async:false,
			success:function(result){
				if(result=="success"){
					alertInfo($common_create_success);
					clean();
					initTab("RoomForm");
				}
			},
			error : function(XMLHttpRequest) {
				 ajaxError(XMLHttpRequest);
				}
		});}
	}
	//修改房间
	function updateRoom(){
		var trueFlag = true;
		var timeSec = "";
		var addTimeFlag =false;
		$("#addTime1").find("tr:not(:first)").each(function (){
			addTimeFlag =true;
			var sTime = $(this).find("td:eq(0)").html();
			var eTime = $(this).find("td:eq(1)").html();
			if(sTime.indexOf("div")>0){
				$.messager.alert('提示', '请先确定添加的预定时间段！', 'warning');
				trueFlag = false;
				return ;
			}else{ 
				sTime = sTime.replace(/:/,"");
				eTime = eTime.replace(/:/,"");
				timeSec +=  sTime + "-" + eTime + ",";
			}
		});
		var roomName = document.getElementById("roomName1").value;
		var roomNameVal = encodeURI(roomName);
		var minCnt = document.getElementById("minCnt1").value;
		var maxCnt = document.getElementById("maxCnt1").value;
		if(roomName==''){
			alertWarning("房间名不能为空");
			trueFlag = false;
			return;
		}
		if(minCnt==''){
			alertWarning("最少人数不能为空");
			trueFlag = false;
			return;
		}
		if(maxCnt==''){
			alertWarning("最大人数不能为空");
			trueFlag = false;
			return;
		}
		if(minCnt>=maxCnt){
			alertWarning("最少，最大人数 填写范围有错");
			trueFlag = false;
			return;
		}
		if (!addTimeFlag && (null ==timeSec || timeSec == "")) {
			$.messager.alert('提示', '请增加预定时间段！', 'warning');
			trueFlag = false;
			return;
		}
		if(trueFlag){
			
			$.ajax({
				url:'updateRoom.shtml',
				data:{"roomName":roomNameVal,"minCnt":minCnt,"maxCnt":maxCnt,"pkRoomId":roomId,"timeSec":timeSec},
				dateType:"text",
				async:false,
				success:function(result){
					if(result=="success"){
						alertInfo($common_edit_success);
						clean();
						initTab("RoomForm");
					}
				},
				error : function(XMLHttpRequest) {
					 ajaxError(XMLHttpRequest);
					}
			});
		}
	}
	
	
	
	
	//关闭清空
	function clean(){
		$("#addTime1").find("tr:not(:first)").each(function (){
			$(this).remove();
		});
		$("#addTime").find("tr:not(:first)").each(function(){
			$(this).remove();
		});
		document.getElementById("roomName").value ="";
		document.getElementById("minCnt").value = "";
		document.getElementById("maxCnt").value = "";
		document.getElementById("roomName1").value = "";
		document.getElementById("minCnt1").value = "";
		document.getElementById("maxCnt1").value = "";
		$('#q').window('close');
		$('#qx').window('close');
	}
	function resTimeEChange(){
		var resTimeSF = $("#startTime").val();
		if (resTimeSF == "") {
			$.messager.alert('提示', '请选择开始时间！', 'warning');
			$("#startTime").val("");
			refreshSelect();
			return;
		}else{
			var ptime = resTimeSF.substring(0, 2);
			var houTime;
				if (ptime.substring(0, 1) == 0) {
					houTime = parseInt(ptime.substring(1, 2)) + 2;
				} else {
					houTime = parseInt(ptime) + 2;
				}

			 
			var dresTimeE = houTime + resTimeSF.substring(2, 4);
			var showTimeE = houTime + ":" + resTimeSF.substring(2, 4);
			$("#endTime").val(dresTimeE);
			$("#showresTimeE").val(showTimeE);
		}
		
		
	}
	//新增一条预定时间
	function addRow(tableId){
		
		html="<tr><td><div class='uboxstyle_small'>";
		html+="<select name='startTime' id='startTime' onchange='resTimeEChange(this)'><option value=''>请选择</option>";
		html+="<option value='0900'>9:00</option><option value='0930'>9:30</option><option value='1000'>10:00</option><option value='1030'>10:30</option>";
		html+="<option value='1100'>11:00</option><option value='1130'>11:30</option><option value='1200'>12:00</option><option value='1230'>12:30</option>";
		html+="<option value='1300'>13:00</option><option value='1330'>13:30</option><option value='1400'>14:00</option><option value='1430'>14:30</option>";
		html+="<option value='1500'>15:00</option><option value='1530'>15:30</option><option value='1600'>16:00</option><option value='1630'>16:30</option>";
		html+="<option value='1700'>17:00</option><option value='1730'>17:30</option><option value='1800'>18:00</option><option value='1830'>18:30</option>";
		html+="<option value='1900'>19:00</option><option value='1930'>19:30</option><option value='2000'>20:00</option>";
		html+="</select></div></td>";
		
		html+="<td>";
		html+="<input type='text' name='showresTimeE' id='showresTimeE'    class='iput_t w100' readonly>";
		html+="<input type='hidden' name='endTime' id='endTime'  >";
		html+="</td>";
		html+="<td><input type='button' value='确定' onclick=\"replaceRow(this)\" class='btn_l'>";
		html+="<input type='button' value='取消' onclick=\"deleteRow(this)\" class='btn_l ml10'></td></tr>"; 
		$("#"+tableId).append(html);
	}
	
	//删除一条预定时间
	function deleteRow(index){
		$(index).parent().parent().remove();
	}
	
	//替换一条预定时间
	function replaceRow(obj){
		var startTime = document.getElementById("startTime").value;
		var endTime = document.getElementById("endTime").value;
		if(startTime>=endTime){
			alertError("时间选择有误！");
			return;
		}
		
		startTime = startTime.substring(0, 2)+":"+startTime.substring(2, 4);
		endTime = endTime.substring(0, 2)+":"+endTime.substring(2, 4);
		$(obj).parent().parent().replaceWith("<tr><td>"+ startTime +"</td> <td>"+ endTime +"</td><td><input type='button' value='删除' onclick=\"deleteRow(this)\" class='btn_l'></td></tr>");
	}
	
</script>
</head>
<body class="bg">
<div class="content m_auto">
	<div class="content_l mt10">
    	<ul>
    	<shiro:hasPermission name="authority/role/home.shtml">
         <li><a href="${basePath}authority/role/home.shtml"><i class="nav_icon_u"></i><br>角色管理</a></li>
           </shiro:hasPermission>
           <shiro:hasPermission name="authority/user/home.shtml">
            <li><a href="${basePath}authority/user/home.shtml"><i class="nav_icon_t"></i><br>用户管理</a></li>
           </shiro:hasPermission>
           <shiro:hasPermission name="SalesRelation/mem.shtml">
            <li><a href="${basePath}SalesRelation/mem.shtml"><i class="nav_icon_s"></i><br>销售关联会员</a></li>
            </shiro:hasPermission>
            <shiro:hasPermission name="ParRoomDetail/ParRoom.shtml">
            <li class="content_hover"><a href="${basePath}ParRoomDetail/ParRoom.shtml"><i class="nav_icon_r"></i><br>房间管理</a></li>
           </shiro:hasPermission>
           <shiro:hasPermission name="SysBarCode/system.shtml">
            <li><a href="${basePath }SysBarCode/system.shtml"><i class="nav_icon_q"></i><br>条码维护</a></li>
            </shiro:hasPermission>
            <shiro:hasPermission name="WfmAuthorize/toShenP.shtml">
            <li><a href="${basePath}WfmAuthorize/toShenP.shtml"><i class="nav_icon_s"></i><br>审批转授权</a></li>
            </shiro:hasPermission>
            <shiro:hasPermission name="holiday/sysHoliday.shtml">
            <li><a href="${basePath}holiday/sysHoliday.shtml"><i class="nav_icon_q"></i><br>节假日管理</a></li>
            </shiro:hasPermission>
        </ul>
    </div>
    <div class="content_r mt10">
    	<!---- 内容 --->
        <div class="file_single_dl fixed mt10">
        	<dl>
            	<dd><label>所属门店：</label>
                	<div class="uboxstyle">
                        <select name="fkBranId" id="fkBranId">
                            <c:forEach items="${list}" var="List">;
                            <option value="${List.pkBranId}">
                            ${List.branName}
                            </option>
                            
                            </c:forEach>
                        </select>
                    </div>
                </dd>
                <dd><input type="button" class="btn ml10" value="查询" onclick="selectRoom('RoomForm')"><input type="button" class="btn ml10" value="新增" onclick="openq()"></dd>
            </dl>
        </div>
        
        <div class="m10">
        <table class="table" id ="RoomTable">
        	<tr>
            	<th>序号</th>
                <th>所属门店</th>
                <th>房间名称</th>
                <th>最少人数</th>
                <th>最大人数</th>
                <th>操作</th>
            </tr>
        </table>
        <!----翻页----->
        
        <div class="page fr m10" id ="pagefoot">

        </div>
        <!----翻页----->
        </div>
        <!---- 内容 --->
    </div>
</div>

<form action="${basePath}ParRoomDetail/findRoomDetail.shtml" method ="post" id="RoomForm">
        	<input type="hidden" name="pageNo" value="1">
        	<input type="hidden" name="pageSize" value="10">
        	<input type="hidden" name="fkBranId" id="fkBranIdHidden">
        </form>



<!---弹出层（添加）--->
<div id="q" class="easyui-window" title="新增" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:550px; height:560px; position:relative;">
	<form action="${basePath}ParRoomDetail/addRoom.shtml"  method="post" id="addForm">
	<div class="m10 dl_dd_label_y">
        <dl class="w360_c fixed">

            <dd>
            	<label>所属门店：</label>
 <div class="uboxstyle">
                      <select name="fkBranId1" id="fkBranId1">   
                            <c:forEach items="${list}" var="List">;
	                            <option value="${List.pkBranId}">
	                            ${List.branName}
	                            </option>                           
                            </c:forEach>
                        </select>
                </div>
                <span class="color_red ml5">*</span>
            </dd>
            
            <dd><label>房间名称：</label><input type="text" class="iput_t fl w200" name="roomName" id="roomName"><span class="color_red ml5">*</span></dd>
            <dd><label>最少人数：</label><input type="text" class="iput_t fl w200" name="minCnt" id="minCnt" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')"><span class="color_red ml5">*</span></dd>
            <dd><label>最大人数：</label><input type="text" class="iput_t fl w200" name="maxCnt" id="maxCnt" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')"><span class="color_red ml5">*</span></dd>
            <dd><label>预定时间段</label><input type="button" class="btn fl ml10" value="增加" id="addButton" onclick="addRow('addTime')"></dd>
        </dl>
        <table class="table mt10" id="addTime">
            <tr>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>操作</th>
            </tr>   
        </table>
    </div>
    <div class="btm_btn btm_bg">
    	<dl>
        	<dd><input type="button" class="btn" onclick="addRoom()" value="确定"></dd>
            <dd><input type="button" class="btn" onclick="clean()" value="返回"></dd>
        </dl>
    </div>
    </form>
</div>
<!---弹出层--->


<!---弹出层--->
<div id="qx" class="easyui-window" title="编辑" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:550px; height:560px; position:relative;">
	<form action="${basePath}ParRoomDetail/updateRoom.shtml"  method="post" id="updateForm">
	<div class="m10 dl_dd_label_y">
        <dl class="w360_c fixed">

            <dd>
            	<label>所属门店：</label>
                <div class="uboxstyle">
                     <input type="text" readonly="readonly" class="iput_t fl w200" name="branName" id="branName">
                </div>
            </dd>
            
            <dd><label>房间名称：</label><input type="text" class="iput_t fl w200" name="roomName" id="roomName1"><span class="color_red ml5">*</span></dd>
            <dd><label>最少人数：</label><input type="text" class="iput_t fl w200" name="minCnt" id="minCnt1" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')"><span class="color_red ml5">*</span></dd>
            <dd><label>最大人数：</label><input type="text" class="iput_t fl w200" name="maxCnt" id="maxCnt1" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')"><span class="color_red ml5">*</span></dd>
            <dd><label>预定时间段</label><input type="button" class="btn fl ml10" value="增加" onclick="addRow('addTime1')"></dd>
        </dl>
        <table class="table mt10" id="addTime1">
            <tr>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
    <div class="btm_btn btm_bg">
    	<dl>
        	<dd><input type="button" class="btn" onclick="updateRoom()" value="确定"></dd>
            <dd><input type="button" class="btn" onclick="clean()" value="返回"></dd>
        </dl>
    </div>
    </form>
</div><!---弹出层--->









</body>
</html>



